<template>
    <div class="function8" v-loading.fullscreen.lock="fullscreenLoading">

        <p class="function1_title1">基本信息</p>
        <div class="function1_content1">
            <div class="function1_content1_left">
                <el-avatar :size="60" :src="info.coverImg" />
                <div class="function1_content1_left_info1">
                    <h4 class="function1_content1_left_info1_name1">{{ info.createTime }} </h4>
                    <div class="function1_content1_left_info1_name2">
                        <p>日期：{{ info.createTime }}</p>
                    </div>
                </div>
            </div>
            <div>
            </div>
        </div>

    </div>
    <div class="function10" v-loading="loading">
        <ul class="function3_ul1">

            <div class="function1_content1">
                <div class="function1_content1_li1">
                    <p class="function1_content1_li1_title1">标题：</p>
                    <p class="function1_content1_li1_content1 mart10">{{ info.title }}</p>
                </div>

                <div class="function1_content1_li1">
                    <p class="function1_content1_li1_title1 mart10">内容：</p>
                    <p class="function1_content1_li1_content1 mart10">{{ info.content }}</p>
                </div>
                <div class="function1_content1_li1">
                    <p class="function1_content1_li1_title1 mart10">内容：</p>
                    <img class="function1_content1_li1_img1" v-for="(item,index) in info.imgL" :key="index" :src="item" alt="">
                </div>

            </div>

        </ul>
    </div>
</template>
<script>

export default {
    data() {
        return {
            info: {},
            fullscreenLoading:false,
            param:{},
        }
    },

    created() {
        this.param.newsId = this.$route.params.id
        this.getData()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        getData() {
            let that = this;
            that.fullscreenLoading = true;
            that.$api.newsdetail(this.param).then(res => {
                if (res) {
                    if(res.img){
                        res.imgL = res.img.split(',')
                    }
                    that.info = res;
                }
                that.fullscreenLoading = false;
            })

        },



    }

}


</script>
<style lang="scss" scoped>
.function8 {
    // bgf padd20
    background-color: #fff;
    padding: 20px;

    .function1_title1 {
        padding-left: 10px;
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #242424;
        border-left: 4px solid #006DFF;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

    .function1_content1 {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #EFEFEF;

        .function1_content1_left {
            display: flex;
            align-items: center;

            .function1_content1_left_info1 {
                padding-left: 16px;

                .function1_content1_left_info1_name1 {
                    font-size: 16px;
                    text-align: left;
                }

                .function1_content1_left_info1_name2 {
                    padding-top: 10px;
                    text-align: left;
                    color: #9a9a9a;

                    .function1_content1_left_info1_name2_content1 {
                        margin-top: 5px;
                    }
                }
            }
        }

        .function1_content1_button1 {
            width: 110px;
        }

        .function1_content1_button2 {
            width: 110px;
        }
    }
}

.function10 {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;

    .function3_title1 {
        background: #F7F8FA;
        padding: 0 18px;
        line-height: 48px;
        color: #1D1D1D;
        font-size: 14px;
        margin-top: 14px;
        text-align: left;
    }

    .function3_ul1 {
        color: #414142;
        display: flex;
        flex-wrap: wrap;
        padding: 26px 20px 16px;

        .function3_ul1_li1 {
            display: flex;
            margin-top: 20px;
            margin-right: 20px;

            .function3_ul1_li1_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li1_content1 {
                font-size: 14px;
                color: #333333;
            }


        }

        .function3_ul1_li2 {
            margin-top: 20px;
            width: 100%;
            display: flex;

            .function3_ul1_li2_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li2_content1 {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .function3_ul1_li2_content1_img1 {
                    width: 120px;
                    margin-right: 20px;
                }
            }
        }

        .function3_ul1_li3 {
            margin-top: 20px;
            display: flex;

            .function3_ul1_li3_title1 {
                font-size: 14px;
                color: #989898;
            }

            .function3_ul1_li3_content1 {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .function3_ul1_li3_content1_li {
                    width: 100%;
                    display: inline-block;
                    font-size: 14px;
                    color: #333;
                    text-align: left;
                }
            }
        }
    }
}
.function1_content1_li1_img1{
    width: 100px;
    margin-top: 10px;
    margin-right: 10px;
}
</style>